<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>新增任务</title>
<link rel="stylesheet" type="text/css" href="css/weal.css"/>
</head>

<body>

<!--新增任务弹窗-->
<div id="addTaskMask"v-show="addStatu">
	<div class="mask"></div>
	<div class="addTask">
		<div class="head dm-clearfix">
			<h4 class="bt dm-left">新增任务</h4>
			<a class="close-btn" @click="closeMask">×</a>
		</div>
		<div class="dm-form">
			<form action="" method="" id="taskForm">
				<table width="100%" cellspacing="0" cellpadding="0">
					<tr>
						<td class="tl">任务名称</td>
						<td class="tl">
							<input type="text" class="max-ipt taskName" name="taskName" placeholder="请输入任务名称" />
						</td>
					</tr>
					<tr>
						<td class="tl" valign="top" style="padding-top: 15px;">任务类型</td>
						<td class="tl taskClass">
							<div class="box dm-clearfix" v-for='(item,index) in taskClass'>
								<label class="dm-left dm-clearfix"><input type="checkbox" class="checkbox dm-left" name="takType" :value="index" /><span class="name dm-left">{{item}}</span></label>
								<label class="dm-left dm-clearfix"><span class="name dm-left">转发次数</span><input class="min-ipt dm-left" type="text" placeholder="不得小于1" /></label>
								<label class="dm-left dm-clearfix"><span class="name dm-left">转发对象</span>
									<div class="sel_box min-sel dm-left">
										<select name="range">
											<option value="0">不限</option>
											<option value="1">微信好友</option>
											<option value="2">朋友圈</option>
										</select>
									</div>
								</label>
							</div>
						</td>
					</tr>
					<tr>
						<td class="tl">任务奖励</td>
						<td class="tl dm-clearfix">
							<div class="sel_box min-sel dm-left">
								<select name="ward" @change="ward($event)">
									<option value="0" selected="selected">优惠券</option>
									<option value="1">积分</option>
								</select>
							</div>
							<input type="text" class="mid-ipt taskWard dm-left" :placeholder="wardType == 0 ? '请输入优惠券编码' : '请输入奖励积分数'" />
						</td>
					</tr>
					<tr>
						<td class="tl">任务对象</td>
						<td class="tl personMod dm-clearfix">
							<span class="person" @click="selPerson($event)" value="0">粉丝</span>
							<span class="person" @click="selPerson($event)" value="1">会员</span>
							<span class="person" @click="selPerson($event)" value="2">导购</span>
						</td>
					</tr>
					<tr>
						<td class="tl"></td>
						<td class="tl btn-box dm-clearfix">
							<input type="button" class="submit dm-left" @click="submitForm" value="确定" />
						</td>
					</tr>
				</table>
			</form>
		</div>
	</div>
</div>

<script src="js/lib/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/vue-2.5.17.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

var vm = new Vue({
	el:'#addTaskMask',
	data:{
		taskClass:['商品','文章','案例','优惠券'],
		wardType:0,
		addStatu:true,
		selected:[],
	},
	methods:{
		//获取已选择任务对象
		setTaskObj:function(){
			var that = this;
			//赋值
			that.selected = ['1','2'];
			$("#addTaskMask .personMod span").each(function(){
				var target = $(this);
				var val = $(this).attr('value');
				for(i in that.selected){
					if(that.selected[i] == val){
						target.addClass('active');
					}
				};
			});
		},
		
		//切换奖励类型
		ward:function(e){
			var that = this;
			that.wardType = e.currentTarget.value;
		},
		
		//选择对象
		selPerson:function(e){
			var target = e.currentTarget;
			if(target.className.indexOf('active') < 0){
				target.className = 'person active';
			}else{
				target.className = 'person';
			};
			var that = this;
			var arr = [];
			$("#addTaskMask .personMod span").each(function(){
				var target = $(this);
				var val = $(this).attr('value');
				if(target.hasClass('active')){
					arr.push(val);
				};
			});
			that.selected = arr;
			
			console.log(that.selected);
		},
		
		//关闭
		closeMask:function(){
			var that = this;
			that.addStatu = false;
		},
		
		//提交
		submitForm:function(){
			var form = $("#taskForm");
			//名称
			if(form.find('.taskName').val()==''){
				alert('请输入任务名称');
				return false;
			};
			//类型
			if(form.find('.taskClass .checkbox:checked').length > 0){
				var isNext = true;
				form.find('.taskClass .checkbox:checked').each(function(){
					var target = $(this).parents('.box');
					var num = target.find('.min-ipt').val();
					if(num == ''){
						alert('请输入转发次数');
						isNext = false;
					};
				});
				if(!isNext){
					return false;
				};
			}else{
				alert('请至少选择一种任务类型');
				return false;
			};
			//奖励
			if(form.find('.taskWard').val()==''){
				alert(form.find('.taskWard').prop('placeholder'));
				return false;
			};
			//对象
			if(form.find('.personMod .active').length < 1){
				alert('请选择任务对象');
				return false;
			};
			
			//成功提交
			form.submit();
		},
	},
	mounted:function(){
		this.setTaskObj();
	}
});

</script>

</body>
</html>
